<template>
    <div style="width: 100%;height:100%;padding:5px;">
        <rx-fit>
            <template #head>
              <a-row style="padding: 10px 0">
                <a-button-group>
                  <a-button @click="showCheckHistory" size="small">{{i18n('list.appHistory','审批历史')}}</a-button>
                  <a-button @click="showMsg" size="small"><ProfileOutlined />{{i18n('list.leaveMsg','留言')}}</a-button>
                  <a-button @click="formPrint()" size="small">{{$ti18('rxForm.print','打印')}}</a-button>
                </a-button-group>
                <a-button-group>
                  <a-button type="primary" size="small" @click="modifyProcess">{{i18n('list.modifyDefine','修改流程定义与配置')}}</a-button>
                </a-button-group>
              </a-row>
            </template>
            <template #middle>
              <a-tabs default-active-key="1" >
                <a-tab-pane key="1" :tab="i18n('list.document','单据')">
                  <div class="btnContainer" style="padding-top:6px;">
                    <a-button @click="saveData"  type="primary" size="small"><SaveOutlined />{{i18n('list.saveData','保存数据')}}</a-button>
                  </div>
                  <rx-fit class="BpmAtabpane">
                    <template #middle>
                      <rx-forms ref="rxForms" v-if="processConfig.formType=='online'"></rx-forms>
                    </template>
                  </rx-fit>
                </a-tab-pane>
                <a-tab-pane key="2" :tab="i18n('list.nodeStaff','节点人员配置')" force-render>
                  <bpm-inst-users :act-inst-id="actInstId" :def-id="defId" @subCloseWindow="subCloseWindow"></bpm-inst-users>
                </a-tab-pane>
                <a-tab-pane key="3" :tab="i18n('list.processVar','流程变量')" force-render>
                  <bpm-inst-vars :act-inst-id="actInstId"></bpm-inst-vars>
                </a-tab-pane>
                <a-tab-pane key="4" :tab="i18n('list.flowChart','流程图')" force-render>
                  <BpmImageView :instId="instId"/>
                </a-tab-pane>
              </a-tabs>
            </template>
        </rx-fit>
        <!-- 流程实例日志 -->
        <bpm-inst-logs :instId="instId" v-model:logShow="logShow" />
        <!--流程实例消息-->
        <bpm-inst-msgs :instId="instId" v-model:msgShow="msgShow"/>
        <!--审批历史-->
        <bpm-check-history  :instId="instId"  v-model:historyShow="historyShow" />
    </div>
</template>

<script>
    import {RxDialog,Util,RxFit} from '@lowcode/jpaas-base-lib';
    import BpmInstMsgs from "../components/BpmInstMsgs.vue"
    import BpmInstLogs from "../components/BpmInstLogs.vue";
    import BpmInstApi from '@/common/api/bpm/bpmInst'
    import FormPcApi from '@/common/api/form/FormPcApi'
    import {BpmImageView} from '@lowcode/jpaas-share-component';
    import RxForms from "./RxForms.vue";
    import BpmCheckHistory from "../components/BpmCheckHistory.vue";
    import formBase from './js/formBase.js';
    import BpmDefApi from "@/common/api/bpm/bpmDef";
    import BpmInstVars from '../components/BpmInstVars.vue';
    import BpmInstUsers from '../components/BpmInstUsers.vue';
    import userUser from "@/stores/userUser";
    import { mapState } from 'pinia'
    import useMain from "@/stores/useMain";

    export default {
        name: "BpmInstOperator",
        components:{
            RxDialog,
            RxFit,
            RxForms,
            BpmInstMsgs,
            BpmInstLogs,
            BpmImageView,
            BpmCheckHistory,
            BpmInstVars,
            BpmInstUsers
        },
        mixins:[formBase],
        computed: {
          ...mapState(userUser, ['user']),
          ...mapState(useMain, ['appKey']),
        },
        props:{
            instId:{
                type:String,
                required:true
            },
            backNodeId:{//在流程明细中进行回退时指定的目标节点
                type:String,
                required:false
            },
            layerid: String,
            lydata: Object,
            destroy:Function,
        },
        data(){
            return {
                historyShow:false,
                logShow:false,
                msgShow:false,
                bpmInstDetail:{},
                backBtnLoading:false,//撤回按钮加载状态
                actInstId:"",
                defId:"",
                vmSelf:this,
                processConfig: {
                    formType: "online"
                },
            }
        },
        created() {
            this.loadDetail();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"bpmInst",key);
            },
            subCloseWindow(action){
                Util.closeWindow(this,action);
            },
            showCheckHistory(){
                this.historyShow=true;
            },
            showBpmInstLog(){
                this.logShow=true;
            },
            showMsg(){
                this.msgShow=true;
            },
            //修改流程定义配置
            modifyProcess(){
                let url=BpmDefApi.designBaseUrl+'?defId=' + this.bpmInstDetail.bpmInst.defId;
                window.open(url);
            },
            loadDetail() {
                let self_ = this;
                if(!self_.instId){
                    self_.instId=self_.$route.params.instId;
                }
                BpmInstApi.getInstDetailForInterpose(self_.instId).then(res => {
                    self_.bpmInstDetail=res;
                    self_.actInstId=self_.bpmInstDetail.bpmInst.actInstId;
                    self_.defId=self_.bpmInstDetail.bpmInst.defId;
                    self_.initProcessConfig();
                })
            },
            initProcessConfig() {
                var self_ = this;
                BpmInstApi.getProcessConfig(this.defId, "").then(res => {
                    if (!res.success) {
                        self_.$message.warning(res.message);
                        return;
                    }

                    if (res.data) {
                        var config = Util.deepClone(self_.processConfig);
                        self_.processConfig = Object.assign(config, res.data);
                    }

                    //加载表单。
                    if (self_.processConfig.formType == "online") {
                        var curUser=self_.user;
                        let contextData={
                            instId:self_.instId,
                            tenantId: curUser.tenantId,
                            tenantLabel:curUser.tenantLabel,
                            opinionHistorys:self_.bpmInstDetail.bpmCheckHistories
                        };
                        self_.$nextTick(function () {
                          self_.$refs.rxForms.setData(self_.bpmInstDetail.formData.data,false,contextData);
                        })
                    }
                })
            },
            saveData(){
                var self_=this;
                this.$confirm({
                    title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                    content: this.i18n('sureToSave','确认保存表单数据吗?'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                    zIndex:20000,
                    onOk() {
                        if (self_.processConfig.formType == "online") {
                            var json=self_.$refs.rxForms.getData();
                            FormPcApi.saveFormDataDirect(json);
                        }
                    }
                });
            },
            formPrint() {
              let bpmInst = this.bpmInstDetail.bpmInst;
              var baseUrl = import.meta.env.JPAAS_BASE_URL;
              var appId = bpmInst.appId;
              var defId = bpmInst.defId;
              var instId = bpmInst.instId;
              var url = baseUrl;
              if(baseUrl.includes('main')){
                  url += "/flowPrint/" + defId;
              }else {
                  url += "/" + this.appKey + "/flowPrint/" + defId;
              }

              if (instId) {
                url += "/" + instId;
              } else {
                url += "/-1";
              }
              if (appId) {
                url += "?appId=" + appId;
              }
              window.open(url);
            }
        }
    }
</script>

<style scoped>
    .BpmAtabpane{
        height: calc(100% - 35px) !important;
    }
    .btnContainer{
        padding: 2px 10px 2px 0px ;
        width: 100%;
        text-align: right;

    }
</style>
